<template>
	<view style="padding-left: 32rpx;">
		<uni-list>

			<uni-list-item v-if="!popuData.otherId._id" showArrow clickable @click="ejectKindred" class="choose-list">
				<template v-slot:header>
					<text class="title">申请人</text>
				</template>
				<template v-slot:body>
					<text class="body">请选择申请人</text>
				</template>
			</uni-list-item>
			<uni-list-item v-else showArrow clickable @click="ejectKindred" class="choose-list">
				<template v-slot:header>
					<text class="title">申请人</text>
				</template>
				<template v-slot:body>
					<text class="body" style="color: #333;">{{popuData.otherId?.name}}</text>
				</template>
			</uni-list-item>


			<uni-list-item v-if="!packData.name" showArrow clickable @click="ejectPack" class="choose-list">
				<template v-slot:header>
					<text class="title">服务包</text>
				</template>
				<template v-slot:body>
					<text class="body">请选择</text>
				</template>
			</uni-list-item>
			<uni-list-item v-else showArrow clickable @click="ejectPack" class="choose-list">
				<template v-slot:header>
					<text class="title">服务包</text>
				</template>
				<template v-slot:body>
					<text class="body" style="color: #333;">{{packData.name}}</text>
				</template>
			</uni-list-item>


			<uni-list-item v-if="!ProjectData.name" showArrow clickable @click="openProject" class="choose-list">
				<template v-slot:header>
					<text class="title">服务项目</text>
				</template>
				<template v-slot:body>
					<text class="body">请选择服务项目</text>
				</template>
			</uni-list-item>
			<uni-list-item v-else showArrow clickable @click="openProject" class="choose-list">
				<template v-slot:header>
					<text class="title">服务项目</text>
				</template>
				<template v-slot:body>
					<text class="body" style="color: #333;">{{ProjectData.name}}</text>
				</template>
			</uni-list-item>


			<uni-list-item v-if="!placeData.name" showArrow clickable @click="ejectPlace" class="choose-list">
				<template v-slot:header>
					<text class="title">服务地点</text>
				</template>
				<template v-slot:body>
					<text class="body">请选择服务地点</text>
				</template>
			</uni-list-item>
			<uni-list-item v-else showArrow clickable @click="ejectPlace" class="choose-list">
				<template v-slot:header>
					<text class="title">服务地点</text>
				</template>
				<template v-slot:body>
					<text class="body" style="color: #333;">{{placeData.name}}</text>
				</template>
			</uni-list-item>


			<uni-list-item v-if="!timeData" showArrow clickable @click="showPicker = true" class="choose-list">
				<template v-slot:header>
					<text class="title">服务时间</text>
				</template>
				<template v-slot:body>
					<text class="body">请选择服务时间</text>
				</template>
			</uni-list-item>

			<uni-list-item v-else showArrow clickable @click="showPicker = true" class="choose-list">
				<template v-slot:header>
					<text class="title">服务时间</text>
				</template>
				<template v-slot:body>
					<text class="body" style="color: #333;">{{timeData}}</text>
				</template>
			</uni-list-item>


			<view class="item-box">
				<u-datetime-picker :show="showPicker" mode="datetime" v-model="selectedTime" @confirm="handleConfirm"
					@cancel="handleCancel"></u-datetime-picker>
			</view>
			<view
				style="margin: auto; width: 670rpx; height: 280rpx; display: flex; justify-content: space-between; font-size: 28rpx; border-top: 1rpx solid #999; padding-top: 30rpx;">
				<text style="color: #999;">备注</text>
				<textarea placeholder-style="color:#999;" placeholder="请填写备注" style="width: 484rpx;height: 216rpx;padding: 28rpx 10rpx;
				 background-color:rgba(242, 242, 242, 1); border-radius: 16rpx; color: rab(241,241,241);" />
			</view>
		</uni-list>

		<button @click="addServe" class="button" type="default">提交申请</button>
	</view>

	<!-- //家庭成员 -->
	<uni-popup ref="popupRef" type="bottom" class="eject">
		<view class="headline">请选择签约人</view>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" style=" max-height:500rpx;;">

			<view class="eject-role" @click="chosenMyName(UserStore.userInfo.name,UserStore.userInfo._id)">
				{{UserStore.userInfo.name}}
			</view>
			<view v-if="familyData" v-for="item in familyData" :key="item._id">
				<view class="eject-role" @click="chosenPopup(item)">{{item.otherId?.name}}</view>
			</view>

		</scroll-view>
		<view class="underside" @click="closePopup">取消</view>
	</uni-popup>


	<!-- //地点 -->
	<uni-popup ref="place" type="bottom" class="eject">
		<view class="headline">请选择地点</view>

		<scroll-view scroll-y="true" :scroll-top="scrollTop" style=" max-height:500rpx;;">
			<view v-for="item in PlaceOfService">
				<view class="eject-role" @click="chosenPlace(item)">{{item.name}}</view>
			</view>
		</scroll-view>

		<view class="underside" @click="closePlace">取消</view>
	</uni-popup>

	<!-- //服务包 -->
	<uni-popup ref="servicePack" type="bottom" class="eject">

		<scroll-view scroll-y="true" :scroll-top="scrollTop" style=" max-height:500rpx;;">
			<view v-for="item in ServicePacks " :key="item._id">
				<view class="eject-role" @click="chosenpack(item)">{{item.name}}</view>
			</view>
		</scroll-view>

		<view class="underside" @click="closePack">取消</view>
	</uni-popup>


	<!-- //服务项目 -->
	<uni-popup ref="serviceProject" type="bottom" class="eject">
		<scroll-view scroll-y="true" :scroll-top="scrollTop" style=" max-height:500rpx;;">
			<view v-for="item in allProject " :key="item._id">
				<view class="eject-role" @click="chosenProject(item)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="underside" @click="closeProject">取消</view>
	</uni-popup>
</template>

<script setup>
	import {
		onMounted,
		ref,
		shallowRef,
		watch
	} from 'vue';
	import {
		aCharacterApi,
		addServeApi,
		doctorApi,
		getFamilyApi,
		getServicePacksApi
	} from '../../api/teamDoctor';
	import {
		useUserStore
	} from '../../store/user';
	import {
		onLoad
	} from '@dcloudio/uni-app';


	//滚动条
	const scrollTop = ref(0);
	const handleScroll = (event) => {
		scrollTop.value = event.target.scrollTop;
	};

	//接受父组件的参数
	const props = defineProps(['doctorId'])

	const UserStore = useUserStore()

	onLoad(() => {
		getFamily()

	})


	//定义数据
	const PlaceOfService = ref([{
			name: '居民家里',
			_id: '0'
		},
		{
			name: '机构门诊',
			_id: '1'
		}
	])

	//获取亲人
	const familyData = ref({})

	function getFamily() {
		getFamilyApi({
			ownId: UserStore.userInfo?._id
		}).then(res => {
			if (res.code == 200) {
				console.log(res.data, '家庭成员');
				familyData.value = res.data
			}
		})
	}
	//选择的家人数据
	const popuData = ref({})
	//家人弹出
	const popupRef = shallowRef({})
	const ejectKindred = () => {
		popupRef.value?.open()
	}
	//选择登录账号的人
	function chosenMyName(item, _id) {
		popuData.value.otherId = ({
			name: item,
			_id: _id
		})
		if (popuData.value) {
			console.log(popuData.value);
			popupRef.value?.close()
		}
	}


	onMounted(() => {
		popuData.value.otherId = {
			name: UserStore.userInfo?.name,
			_id: UserStore.userInfo?._id
		}
	})

	//选择
	function chosenPopup(item) {
		console.log(item);
		popuData.value = item
		if (popuData.value) {
			popupRef.value?.close()
		}
	}
	//关闭
	const closePopup = () => {
		popupRef.value?.close()
	}

	watch(() => popuData.value.otherId._id, () => {
		if (popuData.value.otherId) {
			getServicePacks()
		}
	});
	//获取服务包
	const ServicePacks = ref({})

	function getServicePacks() {
		getServicePacksApi({
			residentId: popuData.value.otherId?._id
		}).then(res => {
			if (res.code == 200) {
				ServicePacks.value = res.data
			}
		})
	}


	//服务数据
	const placeData = ref({})
	//服务地点
	const place = shallowRef({})
	//打开
	const ejectPlace = () => {
		place.value?.open()
	}
	//选择
	function chosenPlace(item) {
		placeData.value = item
		console.log(placeData.value);
		if (placeData.value) {
			place.value?.close()
		}
	}
	//关闭
	const closePlace = () => {
		place.value?.close()
	}

	//时间
	const showPicker = ref(false);
	const selectedTime = ref(Date.now());
	//时间参数
	const timeData = ref()
	const handleConfirm = (e) => {
		const date = new Date(e.value);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		const hour = date.getHours();
		timeData.value = `${year}-${month}-${day} ${hour}:00`
		console.log(timeData.value);
		showPicker.value = false;
	};

	const handleCancel = () => {
		showPicker.value = false;
	};

	//打开服务包

	const packData = ref({})

	//服务包的服务项目
	const allProject = ref({})

	const servicePack = shallowRef({})
	const ejectPack = () => {
		servicePack.value?.open()
	}

	function chosenpack(item) {
		packData.value = item
		allProject.value = item.serviceItemIds
		console.log(packData.value);
		if (packData.value) {
			servicePack.value?.close()
			console.log(packData.value._id, '服务包id21312321312', allProject.value[0]._id);
		}
	}

	const closePack = () => {
		servicePack.value?.close()
	}



	//打开服务项目
	const ProjectData = ref({})

	const serviceProject = shallowRef({})

	const openProject = () => {
		serviceProject.value?.open()
	}

	function chosenProject(item) {
		ProjectData.value = item
		if (ProjectData.value) {
			serviceProject.value?.close()
			console.log(ProjectData.value.name);
		}
	}

	const closeProject = () => {
		serviceProject.value?.close()
	}







	watch(() => props.doctorId._id, () => {
		if (props.doctorId._id) {
			doctorTeam()
		}
	})


	const DetailsDoctor = ref({})
	//获取医生所在团队
	function doctorTeam() {
		aCharacterApi({
			_id: props.doctorId._id
		}).then(res => {
			if (res.code == 200) {

				DetailsDoctor.value = res.data
				console.log(DetailsDoctor.value, '获取成功');
			}
		})
	}



	//添加服务
	function addServe() {
		addServeApi({
			//居民id
			residentId: popuData.value.otherId._id,
			//机构id
			organizationId: DetailsDoctor.value?.organizationId,
			//团队id
			teamId: DetailsDoctor.value?.teamIds[0]?._id,
			//医生id
			doctorId: props.doctorId._id,
			//服务包id
			servicePackId: packData.value._id,
			//服务项目id
			serviceItemId: allProject.value[0]._id,
			//服务地点
			place: placeData.value.name,
			//时间
			time: timeData.value
		}).then(res => {
			if (res.code == 200) {
				uni.navigateTo({
					url: `/minePackage/pages/applicationSucceed/applicationSucceed?_id=${res.data._id}`
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: '请求失败'
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.eject {
		text-align: center;
		font-size: 32rpx;

		.eject-role {
			background-color: #fff;
			height: 112rpx;
			border-bottom: 1px solid #999;
			line-height: 112rpx;
			font-size: 32rpx;
			color: #1877F2;
			;
		}
	}

	.headline {
		background-color: #fff;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #999;
	}

	.underside {
		background-color: #fff;
		height: 174rpx;
		line-height: 174rpx;
		border-top: 20rpx solid #999;
		font-size: 32rpx;
		color: #999;
	}

	.button {
		width: 670rpx;
		height: 88rpx;
		background-color: #2984f8;
		margin: auto;
		margin-top: 44rpx;
		color: #fff;
	}


	.choose-list {
		height: 100rpx;
		background-color: rgb(255, 255, 255, );
	}


	.title {
		width: 120rpx;
		font-size: 28rpx;
		color: rgb(153, 153, 153);
		margin-right: 30rpx;
	}

	.body {
		font-size: 28rpx;
		color: #dbdbdb;
	}
</style>